<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>统计分析</cite></a>
        <a><cite>月销售统计</cite></a>
    </div>
</div>
<!--layui-fluid 不固定容器宽度 100%适应-->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">月销售统计</div>
        <i class="layui-icon" style="font-size: 45px; color: #1E9FFF;">&#xe60c;</i>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md4">
                    <form class="layui-form" lay-filter="formSearch">
                        <div class="layui-form-item" style="margin-top: 10px;">
                            <label class="layui-form-label">年份:</label>
                            <div class="layui-input-block">
                                <input type="" placeholder="请输入(4位数的)年份" autocomplete="off"
                                       class="layui-input" id="yy">
                                <input type="text" class="layui-input" id="test1" name="year">
                            </div>
                        </div>
                    </form>
                    <button type="button" class="layui-btn" id="search-btn">搜索</button>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header"><b>销售趋势表</b></div>
                        <div class="layui-card-body">
                            <table id="test2"></table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <b>销售趋势图</b>
                        </div>
                        <div class="layui-card-body">
                            <!-- 这里写Echarts -->
                            <div class="Echarts_month" style="width: 600px; height: 300px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
    layui.use(['table', 'admin', 'form', 'tree', 'echarts','laydate'], function () {
        // 使用模块
        var admin = layui.admin
            , table = layui.table
            , form = layui.form
            , baseUrl = layui.setter.baseUrl
            , $ = layui.$
            , tree = layui.tree
            , echarts = layui.echarts
            , laydate = layui.laydate;
        var year = document.getElementById('yy');

        year.value = new Date().getFullYear();

        laydate.render({
            elem: '#test1', //指定元素
            type:'year',
            value:year.value
        });

        var tableIns = table.render({
            elem:'#test2',
            height:312,
            url:layui.setter.baseUrl+'byMonth',
            method:'get',
            limit:12,
            cols:[[
                {field:"month",title:"月份"},
                {field: "sum", title: "当月销售额"}
            ]],
            parseData:function (res){
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "data": res.data //解析数据列表
                        };
            },
                request: {
                    pageName: 'page',
                    limitName: 'rows',
                },
            where:{
                year:year.value
            }
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                ,done:function (res){
                var month = [],sum=[];
                for (var i=0;i<12;i++){
                    var q
                    if((i+1)<10){
                        q = "0" + (i+1);
                    }else {
                        q = i+1;
                    }
                    month.push(q);
                    sum[i]=0;
                }
                for(var i = 0;i< 12;i++){
                    for (var j = 0; j < res.data.length; j++) {
                        if(month[i] == (res.data[j].month.substring(5,7))){
                            sum[i] = res.data[j].sum;
                        }
                    }
                }
                for (var i=0;i<12;i++){
                    if((i+1)<10){
                        month[i] = i+1;
                    }
                }
                renderChart(month,sum)
            }

        });
        $('#search-btn').click(function (){
            // var data = document.getElementById('test1').value
            var data = form.val('formSearch');
            tableIns.reload({
                where:data
            })
        })
        function renderChart(month,sum){
            var chartDom = $('.Echarts_month');
            var myChart = echarts.init(chartDom[0]);
            var option;
            option = {
                xAxis: {
                    type: 'category',
                    data: month
                },
                yAxis: {
                    type: 'value',
                    min:0,
                    max: 600000, // 设置最大值
                    // interval: 6000, // 设置刻度间隔
                    axisLabel: {
                        formatter: '{value} 元' // 设置刻度标签的格式
                    }
                },
                series: [{
                    data: sum,
                    type: 'line',
                    // smooth: true
                }]
            };
            option && myChart.setOption(option);
        }
        //echarts图表

    });

</script>
<style>
    #yy{
        display: none;
    }
</style>